<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <!--
        *
        * (c) Copyright Ascensio System SIA 2023
        *
        * Licensed under the Apache License, Version 2.0 (the "License");
        * you may not use this file except in compliance with the License.
        * You may obtain a copy of the License at
        *
        *     http://www.apache.org/licenses/LICENSE-2.0
        *
        * Unless required by applicable law or agreed to in writing, software
        * distributed under the License is distributed on an "AS IS" BASIS,
        * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
        * See the License for the specific language governing permissions and
        * limitations under the License.
        *
        -->
        <title>ONLYOFFICE</title>
        <link rel="icon" th:href="@{/css/img/{icon}.ico(icon=${model.getDocumentType()})}" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/editor.css" />

        <script type="text/javascript" th:src="@{${docserviceApiUrl}}"></script>

        <script th:inline="javascript">
                var docEditor;
                var config;

                var innerAlert = function (message, inEditor) {
                    if (console && console.log)
                        console.log(message);
                    if (inEditor && docEditor)
                        docEditor.showMessage(message);
                };

                // the application is loaded into the browser
                var onAppReady = function () {
                    innerAlert("Document editor ready");
                };

                // the document is modified
                var onDocumentStateChange = function (event) {
                    var title = document.title.replace(/\*$/g, "");
                    document.title = title + (event.data ? "*" : "");
                };

                // the user is trying to switch the document from the viewing into the editing mode
                var onRequestEditRights = function () {
                    location.href = location.href.replace(RegExp("\&?action=view\&?", "i"), "");
                };

                // an error or some other specific event occurs
                var onError = function (event) {
                    if (event) innerAlert(event.data);
                };

                // the document is opened for editing with the old document.key value
                var onOutdatedVersion = function (event) {
                    location.reload(true);
                };

                // replace the link to the document which contains a bookmark
                var replaceActionLink = function(href, linkParam) {
                    var link;
                    var actionIndex = href.indexOf("&actionLink=");
                    if (actionIndex != -1) {
                        var endIndex = href.indexOf("&", actionIndex + "&actionLink=".length);
                        if (endIndex != -1) {
                            link = href.substring(0, actionIndex) + href.substring(endIndex) + "&actionLink=" + encodeURIComponent(linkParam);
                        } else {
                            link = href.substring(0, actionIndex) + "&actionLink=" + encodeURIComponent(linkParam);
                        }
                    } else {
                        link = href + "&actionLink=" + encodeURIComponent(linkParam);
                    }
                    return link;
                }

                // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
                var onMakeActionLink = function (event) {
                    var actionData = event.data;
                    var linkParam = JSON.stringify(actionData);
                    docEditor.setActionLink(replaceActionLink(location.href, linkParam));
                };

                // the meta information of the document is changed via the meta command
                var onMetaChange = function (event) {
                    if (event.data.favorite) {
                        var favorite = !!event.data.favorite;
                        var title = document.title.replace(/^\☆/g, "");
                        document.title = (favorite ? "☆" : "") + title;
                        docEditor.setFavorite(favorite);
                    }
                    innerAlert("onMetaChange: " + JSON.stringify(event.data));
                };


                var dataInsertImage = [[${dataInsertImage}]];

                // the user is trying to insert an image by clicking the Image from Storage button
                var onRequestInsertImage = function(event) {
                    const temp = Object.assign({}, {"c": event.data.c}, dataInsertImage);
                    docEditor.insertImage(temp);
                };

                // the user is trying to select document for comparing by clicking the Document from Storage button
                var onRequestCompareFile = function() {
                    docEditor.setRevisedFile([[${dataCompareFile}]]);
                };

                // the user is trying to select recipients data by clicking the Mail merge button
                var onRequestMailMergeRecipients = function (event) {
                    docEditor.setMailMergeRecipients([[${dataMailMergeRecipients}]]);
                };

                config = [[${model}]];

                if (config.editorConfig.user.name == "Anonymous") {
                    config.editorConfig.user.name = "";
                }

                var onRequestSaveAs = function (event) {  //  the user is trying to save file by clicking Save Copy as... button
                    var title = event.data.title;
                    var url = event.data.url;
                    var data = {
                        title: title,
                        url: url
                    };
                    let xhr = new XMLHttpRequest();
                    xhr.open("POST", "saveas");
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    xhr.send(JSON.stringify(data));
                    xhr.onload = function () {
                        innerAlert(xhr.responseText);
                        innerAlert(JSON.parse(xhr.responseText).file, true);
                    }
                };

                var onRequestRename = function(event) { //  the user is trying to rename file by clicking Rename... button
                    innerAlert("onRequestRename: " + JSON.stringify(event.data));

                    var newfilename = event.data;
                    var data = {
                        newfilename: newfilename,
                        dockey: config.document.key,
                        ext: config.document.fileType
                    };
                    let xhr = new XMLHttpRequest();
                    xhr.open("POST", "rename");
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    xhr.send(JSON.stringify(data));
                    xhr.onload = function () {
                        innerAlert(xhr.responseText);
                    }
                };

                config.width = "100%";
                config.height = "100%";
                config.events = {
                    "onAppReady": onAppReady,
                    "onDocumentStateChange": onDocumentStateChange,
                    'onRequestEditRights': onRequestEditRights,
                    "onError": onError,
                    "onOutdatedVersion": onOutdatedVersion,
                    "onMakeActionLink": onMakeActionLink,
                    "onMetaChange": onMetaChange,
                    "onRequestInsertImage": onRequestInsertImage,
                    "onRequestCompareFile": onRequestCompareFile,
                    "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
                };

                var histArray = [[${fileHistory}]];
                var hist = histArray[0];
                var historyData = histArray[1];
                var usersForMentions = [[${usersForMentions}]];

                if (config.editorConfig.user.id != 4) {
                    if (hist && historyData) {
                        // the user is trying to show the document version history
                        config.events['onRequestHistory'] = function () {
                            docEditor.refreshHistory(JSON.parse(hist));  // show the document version history
                        };
                        // the user is trying to click the specific document version in the document version history
                        config.events['onRequestHistoryData'] = function (event) {
                            var ver = event.data;
                            var histData = historyData;
                            docEditor.setHistoryData(JSON.parse(histData)[ver - 1]);  // send the link to the document for viewing the version history
                        };
                        // the user is trying to go back to the document from viewing the document version history
                        config.events['onRequestHistoryClose'] = function () {
                            document.location.reload();
                        };
                    }
                    // add mentions for not anonymous users
                    config.events['onRequestUsers'] = function () {
                        docEditor.setUsers({  // set a list of users to mention in the comments
                            "users": usersForMentions
                        });
                    };
                    // the user is mentioned in a comment
                    config.events['onRequestSendNotify'] = function (event) {
                        event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
                        var data = JSON.stringify(event.data);
                        innerAlert("onRequestSendNotify: " + data);
                    };
                    // prevent file renaming for anonymous users
                    config.events['onRequestRename'] = onRequestRename;
                }

                if (config.editorConfig.createUrl) {
                    config.events.onRequestSaveAs = onRequestSaveAs;
                };

                var сonnectEditor = function () {
                    if ((config.document.fileType === "docxf" || config.document.fileType === "oform")
                        && DocsAPI.DocEditor.version().split(".")[0] < 7) {
                        innerAlert("Please update ONLYOFFICE Docs to version 7.0 to work on fillable forms online.");
                        return;
                    }

                    docEditor = new DocsAPI.DocEditor("iframeEditor", config);
                };

                if (window.addEventListener) {
                    window.addEventListener("load", сonnectEditor);
                } else if (window.attachEvent) {
                    window.attachEvent("load", сonnectEditor);
                }
        </script>

    </head>
    <body>
        <div class="form">
            <div id="iframeEditor"></div>
        </div>
    </body>
</html>
